import React from 'react'
import { MDXProvider } from '@mdx-js/react'
import { Container, baseStyles } from 'unified-ui'

import CodeBlock from './CodeBlock'

import './Layout.scss'


const Style = ({ children }) => (
    <style
        dangerouslySetInnerHTML={{
            __html: children
        }}
    />
)

const components = {
    // h1: props => <h1 style={{ color: 'tomato', marginTop: '20px' }} {...props} />,
    pre: props => <div  className="show_code_line" {...props} ></div>,
    code: CodeBlock
}

export default props => (
    <MDXProvider components={components}>
        <>
            <Style>{baseStyles}</Style>
            <Container {...props} />
        </>
    </MDXProvider>
)
